<script  lang="ts">
import router from '@/router';
import { ref, onMounted } from 'vue';
import { billStore } from '@/stores/bill';
import { computed } from 'vue';
import { watch } from 'vue';
import { toRaw } from 'vue';
import { showToast } from 'vant';

export default {
    setup() {
        let tips = ref("做好详尽的预算分配，把钱花在刀刃上");
        let color = ref("green");

        const goPage = (path: any) => {
            if (path == null) {
                router.back();
            } else {
                router.push(path);
            }
        }

        let billsj: any = toRaw(billStore().$state.bill);

        let money: any = ref((0).toFixed(2));

        watch(money, (newvalue: any) => {
            if (parseInt(newvalue) < parseInt(budget) / 2) {
                tips.value = "预算充足,开始大展拳脚吧";
                color.value = "green"
            } else if (parseInt(newvalue) > parseInt(budget) * 1.5) {
                tips.value = "预算报表,适当缩减下开支吧";
                color.value = "red"
            } else if (parseInt(newvalue) > parseInt(budget)) {
                tips.value = "据说99%的装修都会超支";
                color.value = "red"
            } else if (parseInt(newvalue) > parseInt(budget) * 0.7) {
                tips.value = "预算告急,小心超支";
                color.value = "#d3ce0d"
            } else if (parseInt(newvalue) > parseInt(budget) / 2) {
                tips.value = "预算使用过半,别忘记还有尾款";
                color.value = "#d3ce0d"
            }
        })

        let hid = ref(false);

        let montFun = () => {
            // console.log(billsj);
            money.value = (0).toFixed(2);
            if (billsj.length == 0) {
                hid.value = false;
            }

            if (billsj.length >= 1) {
                hid.value = true;
                billsj.forEach((item: any) => {
                    money.value = (parseInt(money.value) + item.money).toFixed(2);
                });
                schedule.value = parseInt(money.value) / parseInt(budget) * 100;
                if (schedule.value > 100) {
                    schedule.value = 100;
                }
            }
        }

        let schedule = ref(0); // 进度条

        const budget: string = (132000).toFixed(2); // 预算

        let usable = computed(() => { // 计算可用金额
            return (parseInt(budget) - parseFloat(money.value)).toFixed(2);
        })

        let showbot = (index: number) => {
            num.value = index;
            showBottom.value = true;
        }

        let num: any = ref(null); // 需要删除的下标

        let showBottom = ref(false);

        let Controls = (str: string) => {
            if (str == "编辑") {
                showToast('该功能暂时无法使用');
            } else if (str == "删除") {
                billsj.splice(num.value, 1);
                showBottom.value = false;
                montFun();
            }
        }

        onMounted(() => {
            montFun();
        })

        return {
            tips,
            color,
            goPage,
            billsj,
            money,
            schedule,
            budget,
            usable,
            hid,
            showBottom,
            showbot,
            Controls,

        }
    }
}
</script>

<template>
    <div class="billrecord">
        <div class="billrecord_title">
            <img src="../assets/images/Billrecord/com_taobao_nb_sdk_web_view_title_bar_back.9.png" @click="goPage('/myhome')">
            记账记录
        </div>
        <div class="billrecord_con">
            <span>{{ tips }}</span>
            <div class="money">
                <div class="left"><span>￥</span>{{ money }}</div>
                <div class="right" @click="goPage('/billdatail')">账单明细</div>
            </div>
            <van-progress :show-pivot="false" :color="color" :percentage="schedule" :stroke-width="6" />
            <div class="amount">
                <span><i>预算</i> ￥{{ budget }}</span>
                <span><i>可用</i> ￥{{ usable }}</span>
            </div>
        </div>

        <div class="billrecord_list" v-if="!hid">
            <img src="../assets/images/Billrecord/empty_new_dairy.png">
            <p>这是一个崭新的笔记本</p>
            <p>点击记录按钮,记录每一步装修费用</p>
        </div>

        <div class="billrecord_list_two" v-if="hid">
            <div class="billrecord_item" v-for="(item, index) in billsj" :key="index">
                <p>{{ item.timer }} <img src="../assets/images/Billrecord/hiv_menu_icon.png" @click="showbot(index)"></p>
                <div class="billreocrd_item_bot">
                    <div class="billrecord_item_left">
                        <img src="../assets/images/Billrecord/ic_deco_diary_good_empty.png">
                        <div>
                            <span>{{ item.costname }}</span>
                            <span>{{ item.genre }}</span>
                        </div>
                    </div>
                    <div class="billrecord_item_right">-{{ " " + (item.money).toFixed(2) }}</div>
                </div>
            </div>
        </div>

        <!-- 按钮 -->
        <img src="../assets/images/Billrecord/ic_add_deco_diary.png" @click="goPage('/billtally')">

        <!-- 删除 -->
        <van-popup v-model:show="showBottom" round position="bottom" :style="{ height: '20%' }">
            <div class="popup_list">
                <div class="popup_list_item" @click="Controls('编辑')">
                    <img src="../assets/images/Billrecord/icon_diary_edit.png">
                    <span>编辑</span>
                </div>
                <div class="popup_list_item" @click="Controls('删除')">
                    <img src="../assets/images/Billrecord/ic_search_history_delete.png">
                    <span>删除</span>
                </div>
            </div>
            <div class="popup_btn" @click="showBottom = false">取消</div>
        </van-popup>
    </div>
</template>

<style lang="scss" scoped>
.billrecord {
    background-color: #f5f5f5;

    &>img {
        position: fixed;
        bottom: 30px;
        right: 25px;
        width: 40px;
        height: 40px;
        display: block;
    }
}

.billrecord_title {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background-color: #fff;

    img {
        position: absolute;
        top: 0;
        left: 12px;
        margin-top: 10px;
        width: 20px;
        height: 20px;
    }
}

.billrecord_con {
    padding: 0px 12px;
    padding-top: 10px;
    background-color: #fff;

    span {
        font-size: 14px;
        color: #6d6d6d;
    }

    .money {
        margin-top: 15px;
        display: flex;
        justify-content: space-between;

        .left {
            font-size: 25px;
            font-weight: 600;
        }

        .left>span {
            font-size: 16px;
            font-weight: 600;
            color: #000;
        }

        .right {
            padding: 4px 8px;
            border: 1px solid #6d6d6d;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 400;
            color: #6d6d6d;
        }
    }

    .van-progress {
        margin-top: 10px;
    }

    .amount {
        padding: 12px 0px;

        span:first-child {
            margin-right: 30px;
        }
    }
}

.billrecord_list {
    margin-top: 10px;
    padding: 0px 12px;
    text-align: center;
    background-color: #fff;

    img {
        margin: 0px auto;
        padding-top: 50px;
        width: 200px;
        height: 200px;
        display: block;
    }

    p {
        font-size: 14px;
        color: #999;
    }
}

.billrecord_list_two {
    margin-top: 10px;
    padding: 0px 12px;
    background-color: #fff;

    .billrecord_item {
        padding: 20px 0px;
        border-bottom: 1px solid #ccc;

        p {
            color: #999;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            // background-color: #ccc;
        }

        p img {
            width: 30px;
            height: 30px;
            display: block;
            filter: drop-shadow(0px -5px #ccc)
        }
    }

    .billreocrd_item_bot {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .billrecord_item_left {
            display: flex;
            align-items: center;
        }

        .billrecord_item_left img {
            width: 50px;
            height: 50px;
            display: inline-block;
            border: 1px solid #eee;
            border-radius: 5px;
        }

        .billrecord_item_left div {
            margin-left: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 50px;
        }

        .billrecord_item_left div span {
            display: block;
            height: 100%;
        }

        .billrecord_item_left div span:last-child {
            color: #999;
            font-size: 14px;
        }

        .billrecord_item_right {
            font-size: 18px;
            font-weight: 600;
        }
    }
}

.billrecord :deep(.van-popup--bottom) {
    .popup_list {
        padding: 0px 12px;
        display: flex;

        .popup_list_item {
            margin-top: 10px;
            margin-right: 20px;
            text-align: center;
        }

        .popup_list_item img {
            margin-bottom: 3px;
            padding: 10px;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            display: block;
            background-color: #ccc;
        }

        .popup_list_item span {
            font-size: 14px;
        }
    }

    .popup_btn {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border-top: 1px solid #ccc;
    }
}
</style>